 .loginout {
   color: #3e96e8;
   font-size: 15px;
   align-self: flex-end;
   cursor: pointer;
   margin-left: 10px;
 }

 .box {
   width: 800px;
   height: 650px;
   margin: 0 auto;
   margin-top: 6%;
   border-radius: 5px;
   box-shadow: #ccc 0px 0px 20px;
   display: flex;
 }

 .left {
   width: 200px;
   height: 100%;
   border-right: 1px solid #ccc;
 }

 .right {
   width: calc(100% - 200px);
   height: 100%;
   display: flex;
   flex-direction: column;
 }

 .user,
 .title {
   width: 100%;
   border-bottom: 1px solid #ccc;
   line-height: 50px;
   padding: 0 20px;
   box-sizing: border-box;
   background-color: #fff;
   font-size: 20px;
   display: flex;
   align-items: center;
 }

 .list {
   height: calc(100% - 40px);
   overflow-y: auto;
   box-sizing: border-box;
 }

 ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }

 li {
   height: 40px;
   display: flex;
   align-items: center;
   padding: 0 20px;
   border-bottom: 1px solid #ccc;
   background-color: rgba(229, 229, 229, 0.2);
   cursor: pointer;
 }

 img {
   width: 30px;
   height: 30px;
   margin-right: 10px;
 }

 .content {
   flex: 1;
   padding: 20px;
   background-color: rgb(245, 245, 245);
 }

 .bottom {
   height: 130px;
   border-top: 1px solid #ccc;
   display: flex;
   flex-direction: column;
 }

 textarea {
   border: 0;
   height: 100%;
   width: 100%;
   padding: 0;
   outline: none;
   box-sizing: border-box;
   padding: 5px;
   resize: none;
   flex: 1;
 }

 textarea::-webkit-scrollbar {
   display: none;
 }

 .button {
   height: 50px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   padding: 0 20px;
 }

 .btn {
   width: 100px;
   height: 30px;
   background-color: rgb(233, 233, 233);
   border: 0;
   font-size: 18px;
   color: rgb(7, 193, 96);
   cursor: pointer;
 }

 .userlist {
   line-height: 40px;
   border-bottom: 1px solid #ccc;
   padding: 0 20px;
 }

 .self,
 .others {
   display: flex;
   position: relative;
   margin-bottom: 10px;
 }

 .otherbox {
   background-color: #fff;
 }

 .selfbox {
   background-color: rgb(137, 217, 97);
 }

 .otherbox,
 .selfbox {
   max-width: 300px;
   padding:5px 10px;
   border-radius: 5px;
 }

 .otherarrow {
   background-color: #fff;
   left: 36px;
   top: 15px;
 }

 .selfarrow,
 .otherarrow {
   width: 8px;
   height: 8px;
   position: absolute;
   margin-top: -4px;
   transform: rotate(45deg);
 }

 .selfarrow {
   background-color: rgb(137, 217, 97);
   right: 36px;
   top: 15px;
 }

 .self {
   justify-content: flex-end;
 }

 .selfimg {
   margin: 0 0 0 10px;
 }